<template>
	<view>
		<z-paging-swiper>
			<view slot="top">
				<view class="bg-white u-flex u-row-between u-p-r-28">

					<!-- 寻宠 寻主 -->
					<view style="width:400rpx">
						<u-tabs-swiper active-color="#FFCF0B" ref="uTabs" :list="findCategoryList" :current="current"
							@change="tabsChange" :is-scroll="false"></u-tabs-swiper>
					</view>
					<!-- 筛选 -->
					<view @click="showFilterModal = true" class="u-flex">
						<text class="u-m-r-14 u-font-14" :style="{color:showFilterModal?'#FFCF0B':'#808080'}">筛选</text>
						<u-image width="14px" height="14px" src="@/static/index/filter.png"></u-image>
					</view>
				</view>
			</view>
			<!-- 滑动区域 -->
			<swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item v-for="(item,index) in findCategoryList" :key="index">
					<no-data v-if="dataList[index].length === 0" customClass="bg-f5"></no-data>
					<view class="content">
						<z-paging @onRefresh="onRefresh" :hide-empty-view="true" auto-show-back-to-top ref="paging"
							@query="queryList" :fixed="false" :auto="false" style="height: 100%;"
							loading-more-no-more-text="暂无更多">
							<view>
								<view class="u-p-l-28 u-p-r-28" v-for="(item,idx) in dataList[index]" :key="idx">
									<find-card :type="type" :item="item"></find-card>
								</view>
							</view>
						</z-paging>
					</view>

					<!-- 	<find-swiper-item :category_id="category_id" :tabIndex="index" :currentIndex="swiperCurrent">
					</find-swiper-item> -->


				</swiper-item>
			</swiper>
		</z-paging-swiper>

		<!-- 筛选弹出层 -->
		<u-popup v-model="showFilterModal" mode="top">
			<view>
				<view class="u-p-l-28 u-p-r-28">
					<view class="color-80 u-p-t-28 u-p-b-28 u-font-28">种类
					</view>
					<radio-button v-model="category_id" :list="findFilter"></radio-button>
				</view>
				<view class="u-flex">
					<view @click="handleReset" class="btn border-t">
						重置
					</view>
					<view @click="filterSubmit" class="btn border-t ok">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import findSwiperItem from '@/pagesIndex/components/findSwiperItem/findSwiperItem.vue';
	import radioButton from '@/components/radioButton/radioButton.vue';
	import findCard from '@/pagesIndex/components/findCard/findCard.vue';
	import noData from '@/components/noData/noData.vue';
	import {
		findCategoryList
	} from '@/const';
	import {
		getFindList
	} from '@/api/index';
	import {
		getCommonDataDict
	} from '@/api/common';

	export default {
		components: {
			radioButton,
			findSwiperItem,
			findCard,
			noData
		},
		data() {
			return {
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的

				findCategoryList,
				showFilterModal: false,
				findFilter: [],
				category_id: 0, // 筛选条件
				dataList: [],
				type: 'pet',

			};
		},

		onShow() {
			this.init();
		},
		mounted() {
			this.getBaseFilterData();
		},
		methods: {
			onRefresh() {
				this.$set(this.dataList, this.swiperCurrent, []);
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				this.type = this.findCategoryList[this.swiperCurrent].id;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				this.type = this.findCategoryList[this.swiperCurrent].id;
			},
			async init() {
				const selectCity = uni.getStorageSync('city');
				const city_code = selectCity ? selectCity.city_id : '510100';
				const postData1 = {
					page: 1,
					pageSize: 10,
					category_id: 0,
					type: 'pet',
					city_code
				}

				const postData2 = {
					page: 1,
					pageSize: 10,
					category_id: 0,
					type: 'master',
					city_code
				}
				const res1 = await getFindList(postData1);
				const res2 = await getFindList(postData2);
				this.dataList = [
					res1.data.list,
					res2.data.list,
				]
			},
			async queryList(page, pageSize) {

				const selectCity = uni.getStorageSync('city');
				const city_code = selectCity ? selectCity.city_id : '510100';

				// 0 = pet 1=master
				this.type = this.swiperCurrent === 0 ? 'pet' : 'master';
				const postData = {
					page,
					pageSize,
					type: this.type,
					category_id: this.category_id,
					city_code
				}
				const res = await getFindList(postData);
				const newData = res.data.list;
				this.$refs.paging[this.swiperCurrent].complete(newData);
				const oldData = this.dataList[this.swiperCurrent];
				this.$set(this.dataList, this.swiperCurrent, oldData.concat(newData));

			},

			async getBaseFilterData() {
				const res = await getCommonDataDict();
				const pet_typeObj = res.data.pet_type;
				const list = [{
					name: '全部',
					id: 0
				}];
				for (let i in pet_typeObj) {
					list.push({
						name: pet_typeObj[i],
						id: i
					})
				}
				this.findFilter = list;
			},
			filterSubmit() {
				this.showFilterModal = false;
				this.onRefresh(); // 先清空
				this.queryList(1, 10);
			},
			handleReset() {
				this.category_id = 0;
				this.queryList(1, 10);
			},
			onRefresh() {
				this.$set(this.dataList, this.swiperCurrent, []);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		margin-top: 32px;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		text-align: center;
		width: 50%;
	}

	.ok {
		background: #FFCF0B;
	}

	.category {
		background-color: #fff;
		padding: 18px 14px 7px;
		display: flex;
		justify-content: space-between;

		.active {
			font-size: 16px;
			color: #333 !important;
			font-weight: bold;
			position: relative;

			&::before {
				position: absolute;
				content: '';
				width: 21px;
				height: 2px;
				background: #FFCF0B;
				border-radius: 2px;
				bottom: -8px;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

	.top {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
	}



	.swiper {
		height: 100%;
	}

	.content {
		height: 100%;
		/* 父节点建议开启flex布局 */
		display: flex;
		flex-direction: column;
	}
</style>
